<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">系统首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>旅行者管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>

        <!-- 搜索与添加区域 -->
        <el-row :gutter="20">
            <el-col :span="7">
                <el-input placeholder="请输入内容">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>

            <el-col :span="4">
                <el-button type="primary">添加用户</el-button>
            </el-col>
        </el-row>

        <!-- 用户列表区域 -->
        <el-table
            :data="tableData"
            style="width: 100%"
            stripe>

            <el-table-column type="index" label="#">
            </el-table-column>

            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>

            <el-table-column
                prop="school"
                label="学校"
                width="180">
            </el-table-column>

            <el-table-column
            prop="grade"
            label="年级"
            width="180">
            </el-table-column>

            <el-table-column
            prop="isGraduate"
            label="毕业状态"
            width="180">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 编辑按钮 -->
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        type="primary"
                        icon="el-icon-edit">
                    </el-button>
                    <!-- 删除按钮 -->
                    <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)">
                    </el-button>
                    <!-- 分配按钮 -->
                    <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-setting"
                        @click="handleDelete(scope.$index, scope.row)">分配
                    </el-button>

                </template>
            </el-table-column>

        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 4, 8]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

    </el-card>

  </div>
</template>

<script>
export default {
  data () {
    return {
    // 获取用户列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2
      },
      total: 4,

      tableData: [{
        name: '王小虎',
        school: '华北电力大学',
        grade: '电气1909',
        isGraduate: '在校'
      }, {
        name: '刘大',
        school: '清华大学',
        grade: '电气1909',
        isGraduate: '在校'
      }, {
        name: '徐',
        school: '北京大学',
        grade: '电气1909',
        isGraduate: '在校'
      }, {
        name: 'daddada',
        school: '华北电力大学',
        grade: '电气1909',
        isGraduate: '在校'
      }]
    }
  },

  methods: {
    handleSizeChange (newSize) {
      console.log(newSize)
      this.queryInfo.pagesize = newSize
      console.log(this.queryInfo.pagesize)
    },
    handleCurrentChange (newPage) {
    //   console.log(newPage)
      this.queryInfo.pagenum = newPage
    }
  }

}
</script>

<style lang="less" scoped>

</style>
